<template>
    <div class="itemTop" ref="box1">
        <div class="Swiper_box" @mousemove="startSwiper" @mouseout="endSwiper">
            <img :src="arr[xb]" alt="">
        </div>
        <span v-show="showProgress">{{ xb+1 }} / {{ arr.length}}</span>
        <el-progress v-show="showProgress" :percentage="schedule" :show-text=false />
    </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, toRefs } from 'vue';
const props = defineProps({
    img: String
})
const { img } = toRefs(props)
const box1 = ref(null)
let showProgress = ref(false)
let schedule = ref(0)
let xb = ref(0)
let arr = ref([
    'https://img.zcool.cn/community/01785b5ceb72d1a801209aa02725f5.jpg@1280w_1l_2o_100sh.jpg',
    'https://img.zcool.cn/community/01029b57956e680000012e7ed95695.jpg@1280w_1l_2o_100sh.jpg',
    'https://img.zcool.cn/community/01ce0a5798173a0000018c1b485dc8.png@1280w_1l_2o_100sh.png',
    'https://img.zcool.cn/community/01af315798173c0000018c1bf4befc.png@1280w_1l_2o_100sh.png',
    'https://img.zcool.cn/community/0115aa57a96f230000018c1bafc0c7.jpg@2o.jpg',
    'https://img.zcool.cn/community/01cdb257a701b30000018c1b5552d4.png@1280w_1l_2o_100sh.png',
    'https://img.zcool.cn/community/01de3959891a6500000021298dff6a.png@1280w_1l_2o_100sh.png'
])

onMounted(() => {
    xb.value = 0
    arr.value.unshift(img.value)
})

const startSwiper = (event: { screenX: number; }) => {
    showProgress.value = true
    const pjz = box1._value.clientWidth / (arr.value.length - 1)
    const box1OffsetLeft = box1.value.getBoundingClientRect()
    xb.value = Math.ceil((event.screenX - box1OffsetLeft.left) / pjz)
    schedule.value = 100 / (arr.value.length - 1) * xb.value
}

const endSwiper = () => {
    showProgress.value = false
    xb.value = 0
}

</script>

<style scoped lang="scss">
.itemTop {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .Swiper_box {
        width: 185px;
        height: 280px;

        img {
            width: 185px;
            height: 280px;
        }
    }

    span {
        color: #fff;
        background: rgba(0, 0, 0, .5);
        padding: 3px 5px 3px 5px;
        font-size: 12px;
        position: absolute;
        left: 5px;
        bottom: 10px;
        
    }
}

.el-progress--line {
    width: 185px;
    position: absolute;
    left: 0;
    bottom: 0px;
}
</style>